<template>
	<view class="conten">
		<view class="login" v-if="isshow">
			<view class="login-nav">
				<text class="login-txt1">立刻登录流星引擎</text>
				<view class="login-txt2">
					<text>请阅读</text><text class="bule">用户协议</text><text>和</text><text class="bule">隐私政策</text>
				</view>
			</view>
			<view class="iphone-list">
				<view class="Select">
					<u-input v-model="value" :type="type" :border="border" @click="show = true" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				</view>
				<input :border="border" maxlength="11" type="number" v-model="phone" placeholder="请填写手机号" @input="onInput" />
			</view>
			<view class="hint">
				<text>未注册的手机号验证通过后将自动注册</text>
			</view>
			<button type="default" @click="submit" :disabled="isphone" :class="isphone ? 'logins disable' :'logins'">获取短信验证码</button>
		</view>
		<view class="login" v-else>
			<view class="login-nav">
				<text class="login-txt1">请输入验证码</text>
				<view class="login-txt2">
					<text>验证码已通过短信发送至 +86 {{phone}}</text>
				</view>
			</view>
			<view class="pcood">
				<input v-model="cood" @input="onInputs" class="uni-input" placeholder="请填写验证码" />
				<text :class="isbule?'timebule times' :'times'" @click="discode">{{time}}</text>
			</view>
			<view class="hint">
				<u-checkbox v-model="checked"></u-checkbox><text>同意</text><text style="color:#1677FF;">《用户授权协议》</text>
			</view>
			<button type="default" @click="logincood" :class="iscode ? 'logins disable' :'logins'" :disabled="iscode">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getcode,
		login
	} from "@/api/login/login.js"
	export default {
		data() {
			return {
				iscode: true,
				isphone: true,
				isbule:false,
				value: '+86',
				type: 'select',
				show: false,
				border: false,
				actionSheetList: [{
						text: '+86'
					},

				],
				time: "30s", //倒计时
				checked: true, //同意协议
				isshow: true,
				mobile: '',
				codeText: '',
				disableds: true,
				phone: "",
				cood: "",
			}
		},
		methods: {
			// 选择前缀
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			},
			submit() {
					this.isshow = false;
					this.discode()
			},
			// 验证码功能
			discode() {
				if (this.disableds) {
					this.logins()
					this.disableds = false
					this.isbule=false
					var that = this
					let times = 30
					let timer = setInterval(function() {
						times--;
						that.time = times + "s";
						if (times <= 0) {
							that.disableds = true;
							that.isbule=true
							that.time = "重新获取";
							clearInterval(timer);
						}
					}, 1000);
				} else {
					return
				}
			},
			//获取验证码
			logins() {
				var list = {
					tel: this.phone,
					sence:"LOGIN",
					domain:"APP"
				}
				console.log(list)
				getcode({
					...list
				}).then(res => {
					console.log(res, "33333")
				})
			},
			//登录
			logincood() {
				if(this.checked){
					let obj = {
						tel: this.phone,
						code: this.cood,
						agent_id: 32,
					};
					login({...obj}).then(res => {
						console.log(res)
						if (res.code === 0) {
							uni.setStorageSync('tokenlist', res.data);
							if(res.data.is_first==1){
								uni.reLaunch({
									url:"/pages/merchant/addmerchant"
								})
							}else{
								uni.reLaunch({
									url:"/pages/merchant/cut"
								})
							}
							
						}
					})
				}else{
					
						uni.showToast({
						    title: '请同意用户协议',
						    duration: 1000,
							icon:"none"
						});
					
				}
				
			},
			//监听用户输入

			onInput(event) {
				// console.log(event)
				if (event.detail.value.length == 11) {
					this.isphone = false
				} else {
					this.isphone = true
					return
				}
			},
			onInputs(event) {
				if (event.detail !== "") {
					this.iscode = false
				}else{
					this.iscode = true
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.login {
		display: flex;
		flex-direction: column;
		width:100%;
		height: 100%;
		padding: 0 75rpx;
		padding-top: 180rpx;
		background-image: url(../../static/img/background.png);

		// background-position: center;
		.login-nav {
			color: #999999;

			.login-txt1 {

				font-size: 40rpx;
				line-height: 56rpx;
				color: #333333;
				font-weight: bold;
			}

			.login-txt2 {
				margin-top: 25rpx;
				font-size: 26rpx;

				.bule {
					color: #2979FF;
					line-height: 37rpx;
				}
			}
		}

		.hint {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #999999;
		}

		.logins {
			width: 100%;
			height: 105rpx;
			margin-top: 40rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			background: #2979FF;

		}

		.disable {
			background: #BFBFBF;
		}
	}

	.pcood {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 110rpx;
		margin-top: 70rpx;
		background-color: #F2F2F2;

		.uni-input {
			margin-left: 30rpx;
			border-radius: 10rpx;
		}

		.times {
			padding-right: 15rpx;
			margin-right: 20rpx;
			font-size: 34rpx;
			color: #999999;
		}
		.timebule{
			color:#2979FF ;
		}
	}



	.iphone-list {
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		margin: 30rpx 0;
		background: #F2F2F2;

		.Select {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 130rpx;
			height: 36rpx;
			padding: 0 20rpx;
			border-right: 1rpx solid #C1C1C1;

			.u-input {
				width: 100rpx;
				height: 36rpx;
				text-indent: 0;

			}
		}
	}

	.u-input {
		display: flex;
		align-items: center;
		background: #F2F2F2;
		text-indent: 2em;
		line-height: 110rpx;
	}
</style>